<template>
  <div class="app-container">
    <!-- 头部按钮组 -->
    <menu-button ref="menuButton" @handleChange="openWin" />
    <!-- 表格 -->
    <StuTable
      max-height="700"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :stripe="true"
      border
      :list="tableData"
      :columns="columns"
      :handles="handles"
      @handleClick="handleClick"
    >
      <!--序号-->
      <template v-slot:index="{ scope }">
        <div class="index">
          <span>
            {{
              (pageConfig.page - 1) * pageConfig.pageSize + scope.$index + 1
            }}</span
          >
        </div>
      </template>

      <!-- 图片 -->
      <template v-slot:picture="{ scope }">
        <i
          @click="handleVideoBtn(scope.row)"
          class="el-icon-picture-outline"
        ></i>
      </template>
    </StuTable>

    <!-- 分页 -->
    <Pagination
      :total="pageConfig.total"
      :page.sync="pageConfig.page"
      :pageSizes="undefined"
      :pageSize.sync="pageConfig.pageSize"
      @pagination="getPagination"
    />

    <!-- 发布 -->
    <Release
      v-if="dialogs.release"
      :visible.sync="dialogs.release"
      :roleInfo="dialogs.row"
      @updateData="getShopResource"
    />

    <!-- 图片播放弹窗 -->
    <PictureView
      v-if="dialogs.videoView"
      :visible.sync="dialogs.videoView"
      :roleInfo="dialogs.row"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import Release from "./components/Release";
import PictureView from "./components/PictureView";
import { getShopResource, delShopResource } from "@/api";
export default {
  name: "Graphic",
  components: {
    Pagination,
    Release,
    PictureView
  },
  data() {
    return {
      //表单数据--------------------------------------------
      tableData: [],
      //表单配置--------------------------------------------
      columns: [
        // 表格的表头数据及其参数名称
        { name: "序号", value: "index", slotName: "index" },
        { name: "发布日期", value: "optionDate" },
        { name: "标题", value: "title" },
        { name: "正文", value: "context" },
        { name: "图片", value: "picture", slotName: "picture" },
        { name: "浏览量", value: "clickCount" }
      ],
      //表格的操作列--------------------------------------------
      handles: {
        name: "操作",
        width: "200",
        show: true,
        btns: [
          {
            name: "删除",
            type: "del",
            show: true,
            btnType: "text",
            textColor: "#FF9000",
            directive: "fun_69_UVPiAz"
          }
        ]
      },
      //分页数据--------------------------------------------
      pageConfig: {
        total: 10,
        page: 1,
        pageSize: 10
      },
      //弹窗--------------------------------------------
      dialogs: {
        //编辑密码--------------------------------------------
        videoView: false,
        row: {}
      }
    };
  },

  created() {
    this.getShopResource();
  },
  methods: {
    //头部按钮操作--------------------------------------------
    openWin(e) {
      switch (e.name) {
        case "发布":
          this.$set(this.dialogs, "release", true);
          break;
      }
      console.log(e);
    },

    //获取获取视频/图文/日常--------------------------------------------
    async getShopResource() {
      const shopUuid = this.$store.getters.shopUuid;
      const params = {
        page: this.pageConfig.page,
        pageSize: this.pageConfig.pageSize,
        optionType: "OPTION_PIC",
        shopUuid
      };
      let res = await getShopResource(params).catch(err => console.log(err));
      if (!res) return;
      this.tableData = res.items || [];
      this.$set(this.pageConfig, "total", res.total);
    },

    //操作点击--------------------------------------------
    handleClick(row, type) {
      switch (type) {
        case "del":
          this.deleteData(row);
          break;
        default:
          break;
      }
    },

    //点击图片按钮--------------------------------------------
    handleVideoBtn(row) {
      this.$set(this.dialogs, "videoView", true);
      this.$set(this.dialogs, "row", row);
    },

    //删除数据--------------------------------------------
    deleteData(row) {
      this.$confirm(`此操作将删除改条数据, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log(row.uuid);
          const data = {
            uuid: row.uuid
          };
          delShopResource(data).then(res => {
            if (res.state == 100) {
              this.getShopResource();
              this.$message({
                type: "success",
                message: res.msg
              });
            }
          });
        })
        .catch(e => {
          console.log(e);
        });
    },

    //分页数据-------------------------------------------
    getPagination(data) {
      this.$set(this.pageConfig, "page", data.page);
      this.$set(this.pageConfig, "pageSize", data.pageSize);
      this.getShopResource();
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  position: relative;

  .el-icon-picture-outline {
    font-size: 24px;
    cursor: pointer;
  }
}
</style>
